<template>
  <div :class="['container', {'content-full': ('' === fileContent) || isShowFull}]">
    <transition name="fade">
      <div class="card-container" v-show="('' !== fileContent)">
        <header>
          <h1>{{ fileName }}</h1>
          <h4>{{ author }}</h4>
          <h5>{{ article.lastModified }}</h5>
        </header>
        <!-- v-highlight 在main.js中注册监听 -->
        <div v-html="fileContent" class="content" v-highlight>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import Axios from '../../utils/axios'
  import Markdown from '../../utils/markdown'
  // import 'highlight.js/styles/default.css'
  import '../../assets/css/markdown.css'
  import FormatUtil from '../../utils/formatutil'
  import Constant from "../../utils/constant";

  export default {
    name: "article-content",
    data: function () {
      return {
        author: '',
        category: '',
        fileName: '',
        fileContent: '',
        article: {},
        isShowFull: false
      }
    },
    created: function () {
      this.author = this.$route.params.author;
      this.category = this.$route.params.category;
      this.fileName = this.$route.params.fileName;
      // console.log(this.$route);
      this.getArticleContent();
    },
    watch: {
      // 普通的watch监听
      fileContent (val, oldVal) {
        // console.log(val + ' : ' + oldVal);
      }
    },
    // 重新渲染
    updated: function () {
      // 可视高度
      let visibleHeight = document.documentElement.clientHeight;
      // 实际高度
      let container = $('.container')[0];
      let height = container.clientHeight;
      if (visibleHeight > height) this.isShowFull = true;
    },
    methods: {
      getArticleContent: function () {
        const _this = this;
        // 拼接请求文章内容路径
        // let path = _this.$route.path + ".md";
        Axios.post(Constant.URL_ARTICLE + '/fileContent', {
          author: _this.author,
          category: _this.category,
          fileName: _this.fileName + '.md'
        })
          .then((res) => {
            let data = res.data;
            _this.article = data.data;
            // 格式化最后修改时间
            _this.article.lastModified = FormatUtil.formatDate(_this.article.lastModified);
            if (1 === data.ret) {
              _this.fileContent = Markdown.render(_this.article.content);
            } else {
              alert(data.message);
            }
          }).catch((e) => {
          console.log(e)
        })
      }
    }
  }
</script>

<style scoped>
  .container {
    background: #DDD;
    padding: 0;
    width: 100%;
  }

  .card-container {
    background: white;
    width: 80%;
    border-radius: 20px;
    box-shadow: 2px 2px 1px #888888;
    padding: 10px;
    margin: 50px auto 50px;
  }

  .content-full {
    height: 100%;
  }

  h1 {
    text-align: center;
  }

  h4 {
    text-align: right;
    margin-right: 20px;
  }

  h5 {
    text-align: right;
    margin-right: 20px;
  }

  .content {
    width: 90%;
    padding: 10px 10px 10px 20px;
    margin: 0 auto;
  }

  /*动画*/
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }

  .fade-enter, .fade-leave-to {
    opacity: 0
  }
</style>
